<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="../node_modules/_swiper@6.8.4@swiper/swiper-bundle.css"
    />
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <!-- 头部 -->
    <div class="header">
      <div class="sichuan">
        <span class="u-sichuan">四川省</span>
        <div class="u-sun">
          <div class="sun-light sl1"></div>
          <div class="sun-light sl2"></div>
          <div class="sun-light sl3"></div>
          <div class="sun-light sl4"></div>
          <div class="sun-light sl5"></div>
          <div class="sun-light sl6"></div>
          <div class="sun-light sl7"></div>
          <div class="sun-light sl8"></div>
        </div>
        <span class="u-temperature">19℃~26℃</span>
        <br />
        <span class="u-city">一座来了就不想走的城市<img src="../img/印象@2x.png" alt=""> </span>
        <input type="text" class="u-search" placeholder="搜索目的地、景点、酒店等">
        <ul class="u-icon">
          <li><a href="javascript(0)"><img src="../img/门票@2x.png" alt=""></a><span>门票</span></li>
          <li><a href="javascript(0)"><img src="../img/酒店@2x.png" alt=""></a><span>酒店</span></a></li>
          <li><a href="javascript(0)"><img src="../img/特产@2x.png" alt=""></a><span>特产</span></a></li>
          <li><a href="javascript(0)"><img src="../img/文博@2x.png" alt=""></a><span>文博</span></a></li>
          <li><a href="javascript(0)"><img src="../img/新闻@2x.png" alt=""></a><span>新闻</span></a></li>
        </ul>
        <br />
        <ul class="u-point">
          <li class="big"></li>
          <li class="small"></li>
        </ul>
      </div>
    </div>

    <div class="container">
      <!-- 旅游攻略 -->
      <div class="strategy">
        <a href="javascript(0)">
          <span class="u-sichuan">四川省</span>
          <span class="u-strategy">四川旅游攻略</span>
        </a>
      </div>

      <!-- 为你推荐 -->
      <!-- <div class="recommend">
        <h3>为你推荐</h3>
        <div class="tabs">
          <a href="javascript(0)" class="active">景区</a>
          <a href="javascript(0)" style="margin: 0 6px" class="">酒店</a>
          <a href="javascript(0)" style="margin: 0 6px 0 0;" class="">美食</a>
          <a href="javascript(0)" class="">特产</a>
        </div>
        <div class="swiper-container">
          <div
            class="swiper-wrapper"
          >
            <div class="swiper-slide swiper-slide-visible swiper-slide-active">
              <div class="content-slide">
                <img src="../img/occupy.png" alt="">
                <div class="right">
                  <span class="u-chongqing">重庆市旅游攻略</span>
                  <br />
                  <span class="u-distance">距离652.1km</span>
                  <br />
                  <span class="u-advice">建议游玩：3-5h</span>

                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="content-slide">
                
              </div>
            </div>
            <div
              class="swiper-slide"
            >
              <div class="content-slide">
        
              </div>
            </div>
            <div class="swiper-slide">
              <div class="content-slide">
                
              </div>
            </div>
          </div>
        </div>
      </div> -->

      <!-- 必玩景区 -->
      <div class="whole">
        <h3>必玩景区</h3>
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <span class="u-chengdu">
                成都市
              </span>
              <br />
              <!-- <span class="u-city">一座来了就不想走的城市</span> -->
            </div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
          </div>
        </div>
      </div>

      <!-- 成都区县 -->
      <div class="scenery">
        <h3>成都区县</h3>
        <ul>
          <li><a href="javascript(0)"><img src="../img/occupy.png" alt=""></a><h4>成都</h4><span>一座来了就不想离开的城市</span></li>
          <li><a href="javascript(0)"><img src="../img/occupy.png" alt=""></a><h4>成都</h4><span>一座来了就不想离开的城市</span></li>
        </ul>
      </div>

      <!-- 成都美食 -->
      <div class="cate">
        <h3>成都美食</h3>
        <ul class="u-food">
          <li><a href="javascript(0)"><img src="../img/occupy.png" alt=""></a></li>
          <li><a href="javascript(0)"><img src="../img/occupy.png" alt=""></a></li>
          <li><a href="javascript(0)"><img src="../img/occupy.png" alt=""></a></li>
          <li><a href="javascript(0)"><img src="../img/occupy.png" alt=""></a></li>
          <li><a href="javascript(0)"><img src="../img/occupy.png" alt=""></a></li>
          <li><a href="javascript(0)"><img src="../img/occupy.png" alt=""></a></li>
        </ul>
        <ul class="u-tab">
          <li><a href="javascript(0)">火锅</a></li>
          <li><a href="javascript(0)">串串</a></li>
          <li><a href="javascript(0)">冒菜</a></li>
        </ul>
        <div class="u-more">
          <a href="javascript(0)">了解更多 ></a>
        </div>
      </div>

      <!-- 当地活动 -->
      <div class="activity">
        <h3>当地活动</h3>
        <div class="u-visit">
          <img src="../img/occupy.png" alt="">
        </div>
        <div class="u-more">
          <a href="javascript(0)">了解更多 ></a>
        </div>
      </div>

      <!-- 多彩成都 -->
      <div class="colorful">
        <h3>多彩成都</h3>
        <div class="u-room">
          <div class="left">
            <a href="javascript(0)">
              <img src="../img/occupy.png" alt="">
            </a>
          </div>
          <ul class="right">
            <li><a href="javascript(0)">
              <img src="../img/occupy.png" alt="">
            </a></li>
            <li><a href="javascript(0)">
              <img src="../img/occupy.png" alt="">
            </a></li>
            <li><a href="javascript(0)">
              <img src="../img/occupy.png" alt="">
            </a></li>
            <li><a href="javascript(0)">
              <img src="../img/occupy.png" alt="">
            </a></li>
          </ul>
        </div>
        <div class="u-change">
          <a href="javascript(0)">换一批</a>
        </div>
      </div>

      <!-- 成都见闻 -->
      <div class="sightseeing">
        <h3>成都见闻</h3>
        <div class="u-race">
          <img src="../img/occupy.png" alt="">
          <br />
          <span class="race">四川举办城市马拉松比赛</span>
        </div>
      </div>

      <!-- 精选酒店 -->
      <div class="hotel">
        <h3>精选酒店</h3>
        <ul>
          <li><a href="javascript(0)"><img src="../img/occupy.png" alt=""></a><h4>成都喜来登酒店</h4><span>距离661km 成都市河北东路</span></li>
          <li><a href="javascript(0)"><img src="../img/occupy.png" alt=""></a><h4>成都喜来登酒店</h4><span>距离661km 成都市河北东路</span></li>
          <li><a href="javascript(0)"><img src="../img/occupy.png" alt=""></a><h4>成都喜来登酒店</h4><span>距离661km 成都市河北东路</span></li>
          <li><a href="javascript(0)"><img src="../img/occupy.png" alt=""></a><h4>成都喜来登酒店</h4><span>距离661km 成都市河北东路</span></li>
        </ul>
        <div class="u-more">
          <a href="javascript(0)">了解更多 ></a>
        </div>
      </div>

      <!-- 美食指南 -->
      <div class="hotel">
        <h3>美食指南</h3>
        <ul>
          <li><a href="javascript(0)"><img src="../img/occupy.png" alt=""></a><h4>成都码头火锅</h4><span>距离661km 成都市河北东路</span></li>
          <li><a href="javascript(0)"><img src="../img/occupy.png" alt=""></a><h4>成都码头火锅</h4><span>距离661km 成都市河北东路</span></li>
          <li><a href="javascript(0)"><img src="../img/occupy.png" alt=""></a><h4>成都码头火锅</h4><span>距离661km 成都市河北东路</span></li>
          <li><a href="javascript(0)"><img src="../img/occupy.png" alt=""></a><h4>成都码头火锅</h4><span>距离661km 成都市河北东路</span></li>
        </ul>
        <div class="u-more">
          <a href="javascript(0)">了解更多 ></a>
        </div>
      </div>

      <!-- 探索成都 -->
      <div class="search">
        <h3>探索成都</h3>
        <ul class="u-visit">
          <li class="active"><a href="javascript(0)">旅游攻略</a></li>
          <li><a href="javascript(0)">经典攻略</a></li>
        </ul>
        <div class="u-strategy">
          <ul class="left">
            <li class="big">
              <img src="../img/occupy.png" alt="">
              <br />
              <span>成都市旅游攻略</span>
            </li>
            <li class="small">
              <img src="../img/occupy.png" alt="">
              <br />
              <span>成都市旅游攻略</span>
            </li>
            <li class="small">
              <img src="../img/occupy.png" alt="">
              <br />
              <span>成都市旅游攻略</span>
            </li>
            <li class="small">
              <img src="../img/occupy.png" alt="">
              <br />
              <span>成都市旅游攻略</span>
            </li>
            <li class="small">
              <img src="../img/occupy.png" alt="">
              <br />
              <span>成都市旅游攻略</span>
            </li>
            <li class="small">
              <img src="../img/occupy.png" alt="">
              <br />
              <span>成都市旅游攻略</span>
            </li>
            <li class="small">
              <img src="../img/occupy.png" alt="">
              <br />
              <span>成都市旅游攻略</span>
            </li>
          </ul>
          <ul class="right">
            <li class="small">
              <img src="../img/occupy.png" alt="">
              <br />
              <span>成都市旅游攻略</span>
            </li>
            <li class="small">
              <img src="../img/occupy.png" alt="">
              <br />
              <span>成都市旅游攻略</span>
            </li>
            <li class="small">
              <img src="../img/occupy.png" alt="">
              <br />
              <span>成都市旅游攻略</span>
            </li>
            <li class="small">
              <img src="../img/occupy.png" alt="">
              <br />
              <span>成都市旅游攻略</span>
            </li>
            <li class="small">
              <img src="../img/occupy.png" alt="">
              <br />
              <span>成都市旅游攻略</span>
            </li>
            <li class="small">
              <img src="../img/occupy.png" alt="">
              <br />
              <span>成都市旅游攻略</span>
            </li>
            <li class="small">
              <img src="../img/occupy.png" alt="">
              <br />
              <span>成都市旅游攻略</span>
            </li>
          </ul>
        </div>
        <div class="u-end">
          —— END ——
        </div>
      </div>

      <!-- tab -->
      <div class="tab">
          <div class="tabItem active">
            <img src="../img/首页@2x.png" alt="">
            <br />
            <span>首页</span>
          </div>
          <div class="tabItem">
            <img src="../img/目的地@2x.png" alt="">
            <br />
            <span>目的地</span>
          </div>
          <div class="tabItem">
            <img src="../img/云游@2x.png" alt="">
            <br />
            <span>云游</span>
          </div>
          <div class="tabItem">
            <img src="../img/服务@2x.png" alt="">
            <br />
            <span>服务</span>
          </div>
          <div class="tabItem">
            <img src="../img/我的@2x.png" alt="">
            <br />
            <span>我的</span>
          </div>
      </div>
    </div>

    <script src="../node_modules/_jquery@3.6.0@jquery/dist/jquery.js"></script>
    <script src="../node_modules/_swiper@6.8.4@swiper/swiper-bundle.js"></script>
    <script src="./index.js"></script>
    <script>
      
    </script>
  </body>
</html>
